<template>
    <div class="teacher-list-page">
        <el-card shadow="never">
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column align="center" label="讲师名称" prop="name"/>
                    <el-table-column align="center" label="讲师头像">
                        <template slot-scope="{row}">
                                <img
                                    :src="row.img"
                                    class="h-16 w-16 mx-auto rounded-full object-cover" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="讲师职位" prop="position"/>
                    <el-table-column align="center" label="有收获人数" prop="positive"/>
                    <el-table-column align="center" label="无收获人数" prop="negative"/>
                    <el-table-column align="center" label="关联节点数量" prop="total"/>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button :loading="loadingT" type="text" @click="getDetail(row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <el-pagination
                    @current-change="fetchData"
                    @size-change="handleSizeChange"
                    :current-page.sync="form.page"
                    :page-size="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>

        <el-dialog
            title="表态详情"
            :visible.sync="visible"
            width="70%"
            :modal-append-to-body="false"
        >
            <el-form class="dialogForm" label-width="120px" label-position="right">
                <el-form-item label="讲师头像:">
                    <img :src="dialogData.img" class="h-16 w-16 rounded-full object-cover" alt="">
                </el-form-item>
                <el-form-item label="讲师名称:">{{ dialogData.name }}</el-form-item>
                <el-form-item label="有收获人数:">{{ dialogData.positive }}</el-form-item>
                <el-form-item label="无收获人数:">{{ dialogData.negative }}</el-form-item>
                <el-form-item label="关联节点数量:">{{ dialogData.total }}</el-form-item>
                <div class="mt-8">表态用户</div>
                <el-table :data="listData">
                    <el-table-column label="用户名称" prop="name"/>
                    <el-table-column label="用户邮箱" prop="email"/>
                    <el-table-column label="用户观点">
                        <template slot-scope="{row}">
                            {{ row.opinion === 1 ? '有收获' : '无收获' }}
                        </template>
                    </el-table-column>
                </el-table>
                <div v-if="dialogForm.total > 0" class="footer flex justify-end items-center">
                    <el-pagination
                        @current-change="getDetail"
                        :current-page.sync="dialogForm.page"
                        :page-size="dialogForm.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="dialogForm.total">
                    </el-pagination>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            visible: false,
            loading: false,
            loadingT: false,
            data: [],
            form: {
                page: 1,
                size: 10,
            },
            totalElements: 0,
            dialogForm: {
                page: 1,
                size: 10,
                total: 0,
            },
            dialogData: {},
            listData: [],
        };
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        handleSizeChange(val) {
            this.form.size = val;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('teacher/opinion', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onDialog(row) {
            this.visible = !this.visible;
            this.dialogData = row;
        },
        getDetail(row) {
            this.loadingT = true;
            API.get(`teacher/opinion/${row.id}`, {params: this.dialogForm}).then(res => {
                this.listData = res.content;
                this.dialogForm.total = res.pagination.total;
                this.onDialog(row);
            }).finally(() => this.loadingT = false);
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.teacher-list-page {
    .input-width {
        max-width: 300px;
    }

    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .border-b:last-child {
        border-bottom-width: 0;
    }

    .dialogForm {
        max-height: 500px;
        overflow-y: scroll;
    }
}
</style>
